<template>
  <el-row style="justify-content: center;align-items:center;height: 5vh;padding-left: 2%;padding-right: 3%">
    <el-col :span="24">
      <el-radio-group v-model="radio" size="large">
        <el-radio-button label="按支付方式" />
        <el-radio-button label="按商品类别" />
      </el-radio-group>
    </el-col>
  </el-row>
  <el-row style="justify-content: center;align-items:center;height: 5vh;padding-left: 2%;padding-right: 3%;margin-bottom: 2%">
    <el-col :span="24" style="text-align: right;">
      <el-button :class="curOption==='昨日'?'curSelect':''" size="large" @click="yesterday">昨日</el-button>
      <el-button :class="curOption==='本月'?'curSelect':''" size="large" @click="thisMonth">本月</el-button>
      <el-date-picker
          v-model="curPeriod"
          type="daterange"
          range-separator="->"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
          size="large"
          style="margin: 0 0 0 10px"
          @change="changePeriod"
      />
    </el-col>
  </el-row>
  <div v-if="radio==='按支付方式'">
    <el-row style="font-size: 25px;text-align: center;justify-content: center;padding: 30px;background-color: white;border-bottom: 1px solid #cacaca;">
      <div style="padding-right: 20px">
        <div style="color: #858585;font-size: 15px">实际收入</div>
        <div style="font-weight: bold;">{{byPaymentData.total}}</div>
      </div>
      <div v-if="byPaymentData.total!==0"  style="color: #858585">
        ＝
      </div>
      <div v-if="byPaymentData.total!==0" style="padding-left: 20px;padding-right: 20px">
        <div style="color: #858585;font-size: 15px">总收入</div>
        <div>{{getTotalIncome()}}</div>
      </div>
      <div v-if="byPaymentData.salesVolumeByPayment['优惠活动']!==undefined"  style="color: #858585">
<!--        <el-icon><Minus /></el-icon>-->
        -
      </div>
      <div v-if="byPaymentData.salesVolumeByPayment['优惠活动']!==undefined" style="padding-left: 20px">
        <div style="color: #858585;font-size: 15px">优惠成本</div>
        <div>{{byPaymentData.salesVolumeByPayment['优惠活动']}}</div>
      </div>
    </el-row>
    <el-row style="background-color: white;height: 53vh">
      <el-table :data="getPaymentDataList()"
                height="40vh"
                style="width: 100%;"
                :show-header="false"
                :cell-style="{ textAlign: 'center',fontSize: '18px' }"
      >
        <el-table-column prop="payment">
        </el-table-column>
        <el-table-column prop="value" />
      </el-table>
    </el-row>
  </div>
  <div v-else v-loading="isLoading">
    <el-table :data="byTypeData"
              height="68.8vh"
              style="width: 100%;"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="goodsType" label="类别" />
      <el-table-column prop="recentSalesTypeNum" label="最近售出种类" />
      <el-table-column prop="turnoverRate" label="动销率" >
        <template #default="scope">
          {{scope.row.turnoverRate * 100}}%
        </template>
      </el-table-column>
      <el-table-column prop="salesVolume" label="销售额" />
      <el-table-column label="销售占比" >
        <template #default="scope">
          {{scope.row.salesProportion * 100}}%
        </template>
      </el-table-column>
      <el-table-column prop="gross" label="毛利额" />
    </el-table>
  </div>
</template>

<script setup>
import {Minus} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {store} from "@/store";
import request from "@/utils/request";
import {dateTimeUtils} from "@/utils/dateTimeUtils";

let businessDate=ref({
  storeId:store.getLocalCurrentStoreMain().storeId,
  startDate:"",
  endDate:""
})
const radio=ref("按支付方式")
let byPaymentData= ref({
  salesVolumeByPayment:{}
})
let byTypeData= ref([])
let curOption=ref("今日")
const curPeriod=ref([])
let totalIncome=ref(0.0)
let isLoading=ref(false)
onMounted(()=>{
  yesterday()
})
const yesterday = () => {
  isLoading.value=true
  curOption.value="昨日"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date(),-1).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByDay
  request.post("/business/get/businessIncomeReconcileByPayment",businessDate.value).then(res=>{
    byPaymentData.value=res.data
    getPaymentDataList()
  })
  request.post("/business/get/businessIncomeReconcileByType",businessDate.value).then(res=>{
    byTypeData.value=res.data.sort(function (a, b) {
      return b.salesVolume-a.salesVolume
    })
    isLoading.value=false
  })
}
const thisMonth = () => {
  isLoading.value=true
  curOption.value="本月"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByMonth
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date(),1,"month").formatDateByMonth
  request.post("/business/get/businessIncomeReconcileByPayment",businessDate.value).then(res=>{
    byPaymentData.value=res.data
  })
  request.post("/business/get/businessIncomeReconcileByType",businessDate.value).then(res=>{
    byTypeData.value=res.data.sort(function (a, b) {
      return b.salesVolume-a.salesVolume
    })
    isLoading.value=false
  })
}
const changePeriod = () => {
  isLoading.value=true
  curOption.value="时间段"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(curPeriod.value[0]).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(curPeriod.value[1].setDate(curPeriod.value[1].getDate()+1)).formatDateByDay
  request.post("/business/get/businessIncomeReconcileByPayment",businessDate.value).then(res=>{
    byPaymentData.value=res.data
  })
  request.post("/business/get/businessIncomeReconcileByType",businessDate.value).then(res=>{
    byTypeData.value=res.data.sort(function (a, b) {
      return b.salesVolume-a.salesVolume
    })
    isLoading.value=false
  })
}
const getTotalIncome = () => {
  if(byPaymentData.value.salesVolumeByPayment["优惠活动"]!==undefined){
    totalIncome.value= (byPaymentData.value.total+byPaymentData.value.salesVolumeByPayment["优惠活动"]).toFixed(2)
  }else{
    totalIncome.value=byPaymentData.value.total
  }
  return totalIncome.value
}
const getPaymentDataList = () => {
  let res=[]
  let payment=Object.keys(byPaymentData.value.salesVolumeByPayment)
  for (let i in payment){
    if (payment[i]!=="优惠活动"){
      res.push({
        payment:payment[i],
        value:byPaymentData.value.salesVolumeByPayment[payment[i]]
      })
    }

  }
  return res
}
</script>

<style scoped>
.curSelect{
  color: #ffa202;
}
</style>